import { Card, Drawer, InputItem, Button, WhiteSpace, Toast } from 'antd-mobile'
import React, { ReactElement } from 'react'
import styles from './index.less'
import classnames from 'classnames'
import { history } from 'umi'

interface Props {
    onShow: boolean,
    showHandle: Function
}

function PayModel({ onShow, showHandle }: Props): ReactElement {
    const payHandle = () => {
        Toast.success('支付成功')
        showHandle()
        setTimeout(() => {
            history.push('/olist')
        })
    }
    /** sidebar 是一个react元素 */
    const sidebar = (<Card>
        <Card.Header title='付款详情'></Card.Header>
        <Card.Body>
            <InputItem type='phone' placeholder='请输入手机号' clear></InputItem>
            {/* justify-content:space-between !important */}
            <div className={classnames(styles.auth, 'xyCenter')}>
                <InputItem type='number' maxLength={6} placeholder='请输入6位验证码' clear></InputItem>
                <Button className={styles.authBtn}>发送验证码</Button>
            </div>
            <WhiteSpace size='lg'></WhiteSpace>
            <Button type='primary' onClick={payHandle}>立即付款</Button>
        </Card.Body>
    </Card>)

    /**
     * sideBar
     *  Card
     *      Card.Header title
     *      Card.Body
     *          InputItem
     *              type = 'number'
     *              maxLength = {6}
     *              placeholder='请输入6位数验证码'
     *              clear
     * Drawer
     *  position='bottom'
     *  enableDragHandle 可拽
     *  sidebar={sidebar}
     *  open={showPay}
     *  children={<div></div>}
     */
    return (
        <Drawer
            className={styles.main}
            style={{ minHeight: document.documentElement.clientHeight }}
            contentStyle={{
                color: '#A6A6A6',
                textAlign: 'center',
                paddingTop: 42
            }}
            position='bottom'
            enableDragHandle
            open={onShow}
            sidebar={sidebar}
            children={<div></div>}
        ></Drawer>
    )
}

export default PayModel
